<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <link href="css/personal.css" rel="stylesheet">
    <link href="css/public.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/public.js"></script>
</head>
<body>
    <div id="app">
        <public>
            <template v-slot:header-ul>
                <ul class="header-ul">
                    <li style="width: 60px;">首页</li>
                    <li style="width: 74px;">目的地</li>
                    <li style="width: 88px;">旅游攻略</li>
                    <li style="width: 70px;">去旅行</li>
                    <li style="width: 54px">社区</li>
                    <li style="width: 74px">找搭子</li>
                </ul>
            </template>
            <template v-slot:nologin>
                <div class="header-login">
                    <a href="javascript:void(0)"><img src="images/qq.png" title="QQ登录"/></a>
                    <a href="javascript:void(0)"><img src="images/wx.png" title="微信登录"/></a>
                    <a class="lar" href="lar.html" style="font-weight: bold;">登录</a>
                    <span>|</span>
                    <a class="lar" href="lar.html" style="font-weight: bold;">注册</a>
                </div>
            </template>
            <template v-slot:logined="user">
                <div class="header-login">
                    <a>打卡</a>
                    <a class="msg">消息<i class="bi bi-caret-down-fill"></i></a>
                    <a class="per"><img src="images/defaultAvatar.png"><i class="bi bi-caret-down-fill"></i></a>
                </div>
                <!--消息下拉菜单-->
                <div class="tips msg-tips">
                    <ul>
                        <li>私信</li>
                        <li>系统通知</li>
                        <li>回复消息</li>
                    </ul>
                </div>
                <!--用户下拉菜单-->
                <div class="tips user-tips">
                    <ul>
                        <li><i class="bi bi-pencil-square"></i>写游记</li>
                        <li><i class="bi bi-question-diamond"></i>我的问答</li>
                        <li><i class="bi bi-star-fill"></i>我的收藏</li>
                        <li><i class="bi bi-gear"></i>设置</li>
                        <li><i class="bi bi-box-arrow-left"></i>退出</li>
                    </ul>
                </div>
            </template>
            <template v-slot:container>
                <div class="container-img">
                    <img src="images/1.jpg">
                </div>
                <div class="container-main">
                    <div class="container-main-tip">
                        <ul>
                            <li>Ta的窝</li>
                            <li>Ta的游记</li>
                            <li>Ta的问答</li>
                        </ul>
                    </div>
                    <div class="container-main-main">
                        <div class="main-left">
                            <div class="main-left-avatar">
                                <img src="images/touxiang.jpg">
                            </div>
                            <div class="per-introduce">
                                <ul>
                                    <li>yyyl</li>
                                    <li><i class="bi bi-gender-male"></i></li>
                                    <li>现居：衡阳</li>
                                </ul>
                            </div>
                            <div class="operate">
                                <a><i class="bi bi-plus"></i><span>关注</span></a>
                                <a><span>私信</span></a>
                            </div>
                            <div class="signature">
                                <h3>和老婆一起旅行和潜水的男人。
                                    视觉中国/图虫签约摄影师。
                                    蜂首游记作者，指路人。
                                    资深潜水员，水下摄影师。
                                    公众号：APworld。
                                    头条号：一台相机一支笔</h3>
                            </div>
                            <div class="fans">
                                <ul>
                                    <li><span>111</span><p>关注</p></li>
                                    <li><span>222</span><p>粉丝</p></li>
                                </ul>
                            </div>
                        </div>
                        <div class="main-right">
                            <div class="items">
                                <div class="item">
                                    <div><img src="images/1.jpg"></div>
                                    <div class="item-clearfix">
                                        <div class="item-top"><a>汤加王国，一场与母子大翅鲸的温情相遇——</a>
                                            <a>33333<i class="bi bi-hand-thumbs-up-fill"></i></a>
                                        </div>
                                        <div class="releaseDate"><span><i class="bi bi-eye-fill"></i>555/22</span>
                                            <span>2019-09-29 23:17:02</span>
                                        </div>
                                        <div class="description">冬季到北海道看雪北海道，这三个字，就是浪漫的代表。
                                            一部藤井树不知道藤井树爱上藤井树的《情书》老电影，
                                            淡淡的讲述了一个暗恋到极致的故事。也让人记住了北海道纯粹的美景。
                                            一句来自女儿“想看雪了”的期待，便促成了我们北海道的全家旅行。
                                            于是，20241111111111111111111111111111111111111111111
                                            11111111111111111111
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div><img src="images/1.jpg"></div>
                                    <div class="item-clearfix">
                                        <div class="item-top"><a>汤加王国，一场与母子大翅鲸的温情相遇——</a>
                                            <a>33333<i class="bi bi-hand-thumbs-up-fill"></i></a>
                                        </div>
                                        <div class="releaseDate"><span><i class="bi bi-eye-fill"></i>555/22</span>
                                            <span>2019-09-29 23:17:02</span>
                                        </div>
                                        <div class="description">冬季到北海道看雪北海道，这三个字，就是浪漫的代表。
                                            一部藤井树不知道藤井树爱上藤井树的《情书》老电影，
                                            淡淡的讲述了一个暗恋到极致的故事。也让人记住了北海道纯粹的美景。
                                            一句来自女儿“想看雪了”的期待，便促成了我们北海道的全家旅行。
                                            于是，20241111111111111111111111111111111111111111111
                                            11111111111111111111
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </public>
    </div>
<script>
    var v = new Vue({
        el: "#app",
        data: {}
    })
</script>


</body>
</html>